<!DOCTYPE html>
<html lang="en">
<!--https://www.jianshu.com/p/fc2cc5f3dc20-->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单击+1，显示奇偶 - 选项式API</title>

</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="Application">

    </div>
    <script>
        const App = Vue.createApp({
            setup() {
                //初始化counter(响应式)
                const counter = Vue.ref(0);
                //单击方法
                const increase = () => {
                    counter.value++
                }
                //DOM挂载完毕,组件挂在到页面之后执行。
                Vue.onMounted(() => {
                    counter.value = Math.floor(Math.random() * 9)
                });

                //初始赋值
                const showWhenOdd = Vue.ref(true)
                //单击切换奇偶
                const toggleShowCondition = () => {
                    showWhenOdd.value = !showWhenOdd.value
                }

                //计算属性，切换显示奇偶
                const showMsg = Vue.computed(() => {
                    return counter.value % 2 === 0
                        ? showWhenOdd.value//偶数
                        : !showWhenOdd.value//奇数
                })

                // 外部使用组合API中定义的变量或方法，在模板中可用。
                // 返回的函数与方法的行为相同
                return {
                    counter,
                    increase,
                    toggleShowCondition,
                    showMsg,//切换奇偶
                }

            },
            template: `
            <span class="counter">
            {{counter}}
            <button @click="increase">+1</button>
            </span>
            <div class="msg-panel">
            <span v-if="showMsg">
                是偶数哦
            </span>
            <span v-else>
                是奇数哦
            </span>
            <button @click="toggleShowCondition">{{showWhenOdd ? '奇数展示' : '偶数展示'}}</button>
            </div>
            `
        })
        App.mount("#Application")
    </script>
    <style scoped>
        #Application {
            text-align: center;
            margin-top: 60px;
        }

        .counter {
            width: 100px;
            height: 100px;
            border: 1px solid;
            padding: 10px;
        }

        .msg-panel {
            width: 100px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid;
            padding: 10px;
        }
    </style>

</body>

</html>